<template>
	<div>
		<!-- 数据操作 -->
		<div>
			<el-form :inline="true" class="demo-form-inline">
				<el-button type="primary" @click="openDialog('addDialog')" v-if="roleActionInfoList.sysFormTplListMenu.sys_form_tpl_add_action">添加模板</el-button>
			</el-form>
		</div>

		<!-- 数据列表 -->
		<div>
			<el-table :data="tableList.formList" style="width: 100%" border v-loading.body="loading">
			      <el-table-column type="index" width="70"></el-table-column>
			      <el-table-column prop="name" label="名称"></el-table-column>
			      <el-table-column prop="mark" label="备注"></el-table-column>			      
			      <el-table-column label="操作">
				      <template scope="scope">
			        		<el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'editDialog')" v-if="roleActionInfoList.sysFormTplListMenu.sys_form_tpl_edit_action">编辑</el-button>
			        		<el-button size="small" type="info" @click="editRow(scope.$index, scope.row,'editParamDialog')" v-if="roleActionInfoList.sysFormTplListMenu.sys_form_tpl_config_param_action">编辑参数</el-button>
			        		<el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delDialog')" v-if="roleActionInfoList.sysFormTplListMenu.sys_form_tpl_del_action"></el-button>
				        
				      </template>
				    </el-table-column>

		    </el-table>
		</div>

		<!-- 添加模板对话框 -->
		<el-dialog title="添加模板" :visible.sync="dialog.addDialog.open"  v-if="dialog.addDialog.open">
			<addDialog @closeDialog="closeDialog('addDialog')" @freshList="getFormList"></addDialog>
		</el-dialog>
		<!-- 删除字段对话框 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delDialog.open" size="tiny">
		  <span>确定要删除此条数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogOkBtn('delDialog')">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 修改字段对话框 -->
		<el-dialog title="修改信息" :visible.sync="dialog.editDialog.open"  v-if="dialog.editDialog.open">
			<editDialog @closeDialog="closeDialog('editDialog')" @freshList="getFormList" :editDataInit="form.editFormInfo"></editDialog>
		</el-dialog>

		<!-- 修改表单参数-->
		<el-dialog title="表单模板参数" :visible.sync="dialog.editParamDialog.open"  v-if="dialog.editParamDialog.open" size="full">
			<editParamDialog @closeDialog="closeDialog('editParamDialog')" :editDataInit="form.editParamInfo"></editParamDialog>
		</el-dialog>

	</div>
</template>

<script>
import _roleAction from '../common/roleAction.vue'
import _http from '../common/http.vue'
import addDialog from './addFormTplDialog.vue'
import editDialog from './editFormTplDialog.vue'
import editParamDialog from './editFormParamDialog.vue'
	
export default{
	components:{addDialog,editDialog,editParamDialog},
	data(){
		return {
        	roleActionInfoList:_roleAction.getRoleActionFlag(this,'sysFormTplListMenu'),
			loading:false,
			tableList:{
				formList:[]
			},
			dialog:{
				addDialog:{
					open:false
				},
				delDialog:{
					open:false
				},
				editDialog:{
					open:false
				},
				editParamDialog:{
					open:false
				}
			},
			form:{
				delFormInfo:{
					id:0
				},
				editFormInfo:{},
				editParamInfo:{}
			}
		}
	},
	mounted(){
		this.getFormList()
	},
	methods:{
		getFormList(){
			_http.axiosRequest(this,'configFormTplList',{},(res)=>{
    			this.tableList.formList = res.data
    		})
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		openDialog(dialog){
			this.dialog[dialog].open = true
		},
		editRow(inde,row,dialog){
			if (dialog == 'delDialog') {
				this.form.delFormInfo.id = row.id
			}else if(dialog == 'editDialog'){
				this.form.editFormInfo = row
			}else if(dialog == 'editParamDialog'){
				this.form.editParamInfo = row
			}
			this.openDialog(dialog)
		},
		dialogOkBtn(dialog){
			if (dialog == 'delDialog') {
				this.delFormTplAction(this.form.delFormInfo.id,dialog)
			}
		},
		delFormTplAction(id,dialog){
			_http.axiosRequest(this,'configDelFormTpl',{id:id},(res)=>{
    			if (_http.apiResult(this,res.data)) {
    				this.getFormList()
    				this.closeDialog(dialog)
    			}
    		})
		}
	}
}	
</script>